<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div>111</div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        const divObj = document.querySelector("div");
        const ulObj = document.querySelector("ul");
        /* 
            type会返回一个字符串，表示该事件对象的事件类型。
            target 只读属性是对事件被分派到的对象的引用,即调用该方法的元素
        */
        divObj.addEventListener("click", function (e) {
            console.log(e.type);    //click
            console.log(e.target);  //<div>111</div>
            console.log(this);      //<div>111</div>
            console.log(e.currentTarget);   //<div>111</div>
            //在无嵌套关系时，target，this，currentTarget返回的是同一个值。
        })

        ulObj.addEventListener("click", function (e) {
            // console.log(this);  //<ul>...</ul>
            console.log(e.target);  //点击的具体的li元素标签
            console.log(e.currentTarget);   //等价于 this
        });
    </script>
</body>

</html>